import React, { useRef } from 'react'
import { Button, message, Dropdown, Avatar, Modal } from 'antd';
import { PoweroffOutlined, UserDeleteOutlined, SortAscendingOutlined, ExclamationCircleOutlined } from '@ant-design/icons';

export default function Scroll() {
    const submitRef = useRef(null);
    const showPromiseConfirm = () => {
        confirm({
            title: '退出账号',
            icon: <ExclamationCircleOutlined />,
            content: '您确定要退出当前账号吗?',
            okText: '确定',
            cancelText: "取消",
            onOk() {
                localStorage.clear()
                navigate('/login', { replace: true })
                // return new Promise((resolve, reject) => {
                //     // console.log(resolve,reject);
                //     // setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
                //     navigate('/login')
                //     // localStorage.clear()
                // }).catch(() => console.log('Oops errors!'));
            },
            onCancel() { },
        });
    };
    // 点击显示修改资料模态框
    function showModifyData() {
        document.querySelector(".modifyDataBox").style.display = "block";
    }
    // 点击显示排行榜模态框
    function showRankingList() {
        document.querySelector(".rankingListBox").style.display = "block";
    }
    // 点击隐藏修改资料 = 排行榜模态框
    function close() {
        document.querySelector(".modifyDataBox").style.display = "none";
        document.querySelector(".rankingListBox").style.display = "none";
    }
    function goSubmit() {
        console.log(submitRef);
        submitRef.current.style.display = 'block'
    }
    function qxClose() {
        submitRef.current.style.display = 'none'
    }
    const items = [
        {
            key: '1',
            // label: '个人中心',
            label: (
                <a onClick={showModifyData}>修改资料</a>
            ),
            icon: <UserDeleteOutlined />
        },
        {
            key: '2',
            // label: '排行榜',
            label: (
                <a onClick={showRankingList}>排行榜</a>
            ),
            icon: <SortAscendingOutlined />
        },
        {
            key: '3',
            // label: '退出登录',
            label: (
                <a onClick={showPromiseConfirm}>退出登录</a>
            ),
            icon: <PoweroffOutlined />,
        },

    ];
    return (
        <div className='scroll'>
            {/* // 头部 */}
            {/* <div> */}
            <div className="homeNav">
                <div className="homeNav_center">
                    <div className="homeNav_logo">
                        <img src="/static/home/logo.png" alt="" />
                    </div>
                    {/* <ul className='nav'>
                        <li className='nav_li'><a href="">首页</a></li>
                        <li className='nav_li'><a href="">考试</a></li>
                        <li className='nav_li'><a href="">错题本</a></li>
                        <li className='nav_li'><a href="">收藏夹</a></li>
                    </ul> */}
                    <div style={{ width: '640px', fontSize: '20px', color: '#ffffff' }}>前端第一阶段阶段考试</div>
                    {/* 已登录首页 */}
                    <div className="homeNav_right">
                        <Dropdown
                            menu={{
                                items,
                            }}
                            placement="bottom"
                            arrow
                        >
                            <Avatar style={{ width: '44px', height: '44px', display: 'flex', justifyContent: 'center', alignItems: 'center', marginRight: '12px' }}
                                src="static/home/user.png" />
                            {/* <Avatar style={{ width: '44px', height: '44px', display: 'flex', justifyContent: 'center', alignItems: 'center', marginRight: '12px' }}
                            src={userinfo.avatar} /> */}
                        </Dropdown>
                        {/* <span className='homeNav_name'>{userinfo.name}</span> */}
                        <span className='homeNav_name'>李四</span>

                    </div>
                </div>
            </div>
            {/* </div> */}
            {/* 内容 */}
            <main className='scrollBox'>
                <div className="scrollBox_Scantron">
                    <div className="scrollBox_ScantronTag">
                        <span></span>
                        <div>答题卡</div>
                    </div>
                    <div className="scrollBox_title">单选题（共10题，合计20分）</div>
                    <div className="miniBox">
                        <div className='miniBoxCard'>
                            <div className='numberBox'>1</div>
                            <div className='iconBox'>
                                <img src="/static/test/test-star2.png" alt="" />
                            </div>
                        </div>
                        <div className='miniBoxCard'>
                            <div className='numberBox noBtn'>2</div>
                            <div className='iconBox'></div>
                        </div>
                        <div className='miniBoxCard'>
                            <div className='numberBox'>3</div>
                            <div className='iconBox'></div>
                        </div>
                        <div className='miniBoxCard'>
                            <div className='numberBox'>4</div>
                            <div className='iconBox'></div>
                        </div>
                        <div className='miniBoxCard'>
                            <div className='numberBox'>5</div>
                            <div className='iconBox'></div>
                        </div>
                        <div className='miniBoxCard'>
                            <div className='numberBox'>6</div>
                            <div className='iconBox'></div>
                        </div>
                        <div className='miniBoxCard'>
                            <div className='numberBox'>7</div>
                            <div className='iconBox'></div>
                        </div>
                        <div className='miniBoxCard'>
                            <div className='numberBox'>8</div>
                            <div className='iconBox'></div>
                        </div>
                        <div className='miniBoxCard'>
                            <div className='numberBox'>9</div>
                            <div className='iconBox'></div>
                        </div>
                        <div className='miniBoxCard'>
                            <div className='numberBox'>10</div>
                            <div className='iconBox'></div>
                        </div>
                    </div>
                    <div className="scrollBox_title">多选题（共10题，合计20分）</div>
                    <div className="miniBox">
                        <div className='miniBoxCard'>
                            <div className='numberBox'>1</div>
                            <div className='iconBox'>
                                <img src="/static/test/test-star2.png" alt="" />
                            </div>
                        </div>
                        <div className='miniBoxCard'>
                            <div className='numberBox noBtn'>2</div>
                            <div className='iconBox'></div>
                        </div>
                        <div className='miniBoxCard'>
                            <div className='numberBox'>3</div>
                            <div className='iconBox'></div>
                        </div>
                        <div className='miniBoxCard'>
                            <div className='numberBox'>4</div>
                            <div className='iconBox'></div>
                        </div>
                        <div className='miniBoxCard'>
                            <div className='numberBox'>5</div>
                            <div className='iconBox'></div>
                        </div>
                        <div className='miniBoxCard'>
                            <div className='numberBox'>6</div>
                            <div className='iconBox'></div>
                        </div>
                        <div className='miniBoxCard'>
                            <div className='numberBox'>7</div>
                            <div className='iconBox'></div>
                        </div>
                        <div className='miniBoxCard'>
                            <div className='numberBox'>8</div>
                            <div className='iconBox'></div>
                        </div>
                        <div className='miniBoxCard'>
                            <div className='numberBox'>9</div>
                            <div className='iconBox'></div>
                        </div>
                        <div className='miniBoxCard'>
                            <div className='numberBox'>10</div>
                            <div className='iconBox'></div>
                        </div>
                    </div>
                    <div className="scrollBoxBottom">
                        <span className='answered'></span>已答
                        <span className='answered' style={{ backgroundColor: '#f1f3f8' }}></span>未答
                        {/* <span className='answered'><img src="../../public/static/test/test-star2.png" alt="" /></span>收藏 */}
                        <div className='collection'><img src="/static/test/test-star2.png" alt="" /></div>收藏
                    </div>
                </div>
                <div className="scrollBox_content">
                    <div className="scrollBox_content_title">单选题（共10题，合计20分）</div>
                    <div className="scrollBox_content_bg">
                        <div className="scrollBox_content_bg_main">
                            <div className="scrollBox_content_bg_mainTitle">
                                <div className="scrollBox_content_bg_mainTitleLeft">1. 递接文件</div>
                                <div className="scrollBox_content_bg_mainTitleRight">
                                    <img src="/static/test/test-star2.png" alt="" />收藏
                                </div>
                            </div>
                            <div className='scrollBox_content_bg_mainContent'>
                                <div className="planABox">
                                    <input className='circular' type="radio" />A.  正面朝向对方
                                </div>
                                <div className="planABox">
                                    <input className='circular' type="radio" />B.  正面朝向对方
                                </div>
                                <div className="planABox">
                                    <input className='circular' type="radio" />C.  正面朝向对方
                                </div>
                            </div>
                        </div>
                        <div className="line"></div>
                        <div className="scrollBox_content_bg_main">
                            <div className="scrollBox_content_bg_mainTitle">
                                <div className="scrollBox_content_bg_mainTitleLeft">1. 递接文件</div>
                                <div className="scrollBox_content_bg_mainTitleRight">
                                    <img src="/static/test/test-star.png" alt="" /><span style={{ color: '#333333' }}>收藏</span>
                                    {/* <img src="../../public/static/test/test-star2.png" alt="" />收藏 */}
                                </div>
                            </div>
                            <div className='scrollBox_content_bg_mainContent'>
                                <div className="planABox">
                                    <input className='circular' type="radio" />A.  正面朝向对方
                                </div>
                                <div className="planABox">
                                    <input className='circular' type="radio" />B.  正面朝向对方
                                </div>
                                <div className="planABox">
                                    <input className='circular' type="radio" />C.  正面朝向对方
                                </div>
                            </div>
                        </div>
                        <div className="line"></div>
                        <div className="scrollBox_content_bg_main">
                            <div className="scrollBox_content_bg_mainTitle">
                                <div className="scrollBox_content_bg_mainTitleLeft">1. 递接文件</div>
                                <div className="scrollBox_content_bg_mainTitleRight">
                                    <img src="/static/test/test-star2.png" alt="" />收藏
                                </div>
                            </div>
                            <div className='scrollBox_content_bg_mainContent'>
                                <div className="planABox">
                                    <input className='circular' type="radio" />A.  正面朝向对方
                                </div>
                                <div className="planABox">
                                    <input className='circular' type="radio" />B.  正面朝向对方
                                </div>
                                <div className="planABox">
                                    <input className='circular' type="radio" />C.  正面朝向对方
                                </div>
                            </div>

                        </div>
                        <div className="line"></div>
                        <div className="scrollBox_content_title">多选题（共10题，合计20分）</div>
                        <div className="scrollBox_content_bg_main">
                            <div className="scrollBox_content_bg_mainTitle">
                                <div className="scrollBox_content_bg_mainTitleLeft">1. 递接文件</div>
                                <div className="scrollBox_content_bg_mainTitleRight">
                                    <img src="/static/test/test-star2.png" alt="" />收藏
                                </div>
                            </div>
                            <div className='scrollBox_content_bg_mainContent'>
                                <div className="planABox">
                                    <input className='square' type="checkbox" />A.  正面朝向对方
                                </div>
                                <div className="planABox">
                                    <input className='square' type="checkbox" />A.  正面朝向对方
                                </div>
                                <div className="planABox">
                                    <input className='square' type="checkbox" />A.  正面朝向对方
                                </div>
                            </div>
                            <div className="scrollBox_content_bg_main">
                                <div className="scrollBox_content_bg_mainTitle">
                                    <div className="scrollBox_content_bg_mainTitleLeft">1. 递接文件</div>
                                    <div className="scrollBox_content_bg_mainTitleRight">
                                        <img src="/static/test/test-star2.png" alt="" />收藏
                                    </div>
                                </div>
                                <div className='scrollBox_content_bg_mainContent'>
                                    <div className="planABox">
                                        <input className='square' type="checkbox" />A.  正面朝向对方
                                    </div>
                                    <div className="planABox">
                                        <input className='square' type="checkbox" />A.  正面朝向对方
                                    </div>
                                    <div className="planABox">
                                        <input className='square' type="checkbox" />A.  正面朝向对方
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div className="scroll_time">
                    <div className='timeOut'>剩余时间</div>
                    <div className="timer">00:59:37</div>
                    <i></i>
                    <div className='pace'>当前进度</div>
                    <div className='fraction'>3/10</div>
                    <span><div></div></span>
                </div>
                <div className="submitBtn" onClick={goSubmit}>提交试卷</div>
            </main>
            <footer className='footer'>
                Copyright © 2021  成都蜗牛创想科技有限公司
            </footer>
            {/* 提交模态框 */}
            <div className="modalBox" ref={submitRef}>
                <p>有试题未完成，是否现在交卷？</p>
                <div className="modalBox_btnBox">
                    <div className="qx" onClick={qxClose}>取消</div>
                    <div className="qx">确定</div>
                </div>
            </div>
        </div>
    )
}
